import {
  ModalForm,
  ProFormText,
  ProFormDatePicker,
  ProFormSelect,
} from '@ant-design/pro-components';
import { Button, Form, message, Upload, } from 'antd';
import { getToken } from '../../utils/const.ts';
import { UploadOutlined } from '@ant-design/icons';
import { request } from '../../utils/request.ts';
const Edit = ({ open, setOpen, actionRef, record, }) => {
  const [form] = Form.useForm();
  const uploadProps = {
    headers: {
      token: getToken(),
    },
    maxCount: 1,
  }
  return (
    <>
      <ModalForm
        title={"新增教练"}
        form={form}
        autoFocusFirstInput
        open={open}
        width={500}
        layout="horizontal" // 关键点
        labelCol={{ span: 6 }} // label 占 6/24
        wrapperCol={{ span: 18 }} // 输入框占 18/24
        modalProps={{
          destroyOnClose: true,
          onCancel: () => setOpen(false),
        }}
        onFinish={async (values) => {
          const { pic, ...other } = values;
          console.log(pic[0].response)
          try {
            await request('/api/coachRegister', {
              method: 'POST',
              data: {
                ...other,
                pic: pic[0].response.data,
              },
            });
            message.success('提交成功');
            setOpen(false);
            actionRef.current?.reload();
          } catch (error) {
            console.error('Failed to submit data:', error);
          }
          return true;
        }}
      >
        <ProFormText name="email" label="邮箱" rules={[{ required: true, }]} />
        <ProFormText name="mobilephone" label="手机号" rules={[{ required: true, }]} />
        <ProFormText name="idcard" label="身份证号码" rules={[{ required: true, }]} />
        <ProFormSelect
          options={[
            {
              value: '男',
              label: '男',
            },
            {
              value: '女',
              label: '女',
            },
          ]}
          name="sex"
          label="性别"
          rules={[{ required: true, message: '请选择性别' }]}
        />
        <ProFormText name="name" label="姓名" rules={[{ required: true, }]} />
        <ProFormText name="address" label="单位信息" rules={[{ required: true, }]} />
        <ProFormDatePicker name="birthday" label="生日" rules={[{ required: true, }]} />
        <Form.Item
          label="头像地址"
          name="pic"
          valuePropName="fileList"
          getValueFromEvent={e => Array.isArray(e) ? e : e && e.fileList}
          rules={[
            { required: true, message: '请上传头像' },
          ]}
        >
          <Upload name="file" action="/api/uploadFile" {...uploadProps} listType="picture">
            <Button icon={<UploadOutlined />}>上传头像</Button>
          </Upload>
        </Form.Item>
      </ModalForm >
    </>
  );
};
export default Edit;